<template>
	<view class="subsystem-work-detail-main">
		<view class="title">
			<view @click="checkTitleIndexHandle(1)" :class="{ 'active' : checkTitleIndex==1 }">工单信息
			</view>
			<view @click="checkTitleIndexHandle(2)" :class="{ 'active' : checkTitleIndex==2 }">来源
			</view>
			<view @click="checkTitleIndexHandle(3)" :class="{ 'active' : checkTitleIndex==3 }">作业对象
			</view>
			<view @click="checkTitleIndexHandle(4)" :class="{ 'active' : checkTitleIndex==4 }">流程明细
			</view>
		</view>
		<view id="subsystem-work-detail" class="subsystem-work-detail-body">
			<view class="work-detail">
				<view id="work-data" class="equipment_text">
					工单信息
				</view>
				<view class="work-detail-body global_box">
					<view class="item">
						<view class="left">
							工单名称
						</view>
						<view class="right">
							{{ checkObj.name }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							业务名称
						</view>
						<view class="right">
							{{ checkObj.baseName }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							业务类型
						</view>
						<view class="right">
							{{ checkObj.cycleType==0 ? '临时' : '计划' }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							项目
						</view>
						<view class="right">
							{{ checkObj.projectName }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							优先级
						</view>
						<view class="right">
							{{ checkObj.level==0 ? '一般' : checkObj.level==1 ? '重要' : checkObj.level==2 ? '紧急' : '' }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							工单状态
						</view>
						<view class="right">
							{{ checkObj.stepName }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							生成时间
						</view>
						<view class="right">
							{{ checkObj.startDate }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							执行人
						</view>
						<view class="right">
							{{ checkObj.executor ? checkObj.executor : '——'}}
						</view>
					</view>
					<view class="item">
						<view class="left">
							验收人
						</view>
						<view class="right">
							{{ checkObj.accepter ? checkObj.accepter : '——' }}
						</view>
					</view>
				</view>
			</view>
			<view class="source">
				<view id="source" class="equipment_text">
					来源
				</view>
				<view class="work-detail-body global_box">
					<view class="item">
						<view class="left">
							计划名称
						</view>
						<view class="right">
							{{ detailData.resource.originUser }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							工单来源
						</view>
						<view class="right">
							{{ detailData.resource.busEventName }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							周期名称
						</view>
						<view class="right">
							{{ detailData.resource.deviceName }}
						</view>
					</view>
					<view class="item">
						<view class="left">
							作业对象类型
						</view>
						<view class="right">
							{{ detailData.resource.deviceName }}
						</view>
					</view>
					<view class="item-content">
						<view class="label">
							工单内容
						</view>
						<view class="label-body">
							<view v-for="(item,index) in detailData.currentPropValues" :key="index">
								{{item}}
							</view>
							<view v-if="detailData.resource.orderContent">
								处理方法:{{ detailData.resource.orderContent }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="job-object" v-if="workOrderObjectVos.length">
				<view id="job-title" class="equipment_text">
					作业对象
				</view>
				<view class="job-obj-body global_box">
					<view @click="processHandle(item)" v-for="(item,index) in workOrderObjectVos" :key="item.id"
						class="item">
						<view class="text-1">
							[<text>{{ item.objectType==0 ? '设备' : '空间' }}</text>]
							<text>{{ item.objectInfo.name }}</text>
							<text
								:class="{ 'level-2':item.procedureVo.checkStatus==0,'level-4':item.procedureVo.checkStatus==1 }">
								{{ item.procedureVo.checkStatus==0 ? '未完成' : item.procedureVo.checkStatus==1 ? '已完成' : '' }}
							</text>
						</view>
						<view class="text-2">
							<text>{{ item.objectInfo.address || "" }}</text>
						</view>
						<view class="text-3">
							{{ item.createDate }}
						</view>
						<view class="upload-obj" @click.stop="uploadHandle(item)">
							<!-- <text v-if="JSON.stringify(item.paramMap)!=='{}' && Object.keys(item.paramMap).length">查看上报</text> -->
							<text v-if="checkObj.stepDefineFlag=='execute_step'">填写上报</text>
							<text v-else>查看上报</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flow-class" v-if="detailData.processDetail">
				<view id="flow" class="equipment_text">
					流程明细
				</view>
				<view class="flow-class-body global_box">
					<view class="item" v-for="(item,index) in detailData.processDetail" :key="index">
						<view class="left">
							<view class="content">
								<view>
									{{ item.description }}
								</view>
								<view v-if="item.content">
									结论:{{ item.content }}
								</view>
								<view>
									<image @click="clickImageHandle(item.imgPaths)" class="images"
										v-for="(item2,index2) in item.imgPaths" :key="index2" :src="item2" mode="" />
								</view>
								<view class="time">
									{{ item.createDate }}
								</view>
							</view>
						</view>

						<view class="right level-2">
							{{ item.stepDefineName }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="base-box" v-if="JSON.stringify(mainMenu)!=='{}'">
			<view class="left-item item" @click="menuHandle(mainMenu)">
				{{ mainMenu.name }}
			</view>
			<view v-if="menuList.length" class="right-item item" @click="popupMenu">
				更多
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../request/index.js"

	export default {
		data() {
			return {
				checkTitleIndex: 1,
				checkObj: {},
				detailData: {},
				targetStepDefineFlag: undefined,
				mainMenu: {},
				menuList: [],
				workOrderObjectVos: [],
				permissonList: ['execute_step', 'accept_step', 'finish_step'],
				processData: {}
			};
		},
		async onLoad(options) {
			console.log(options);
			this.checkObj = JSON.parse(options.checkObj)
			await this.getWorkDetailHandle()
			this.getButtonPermission()
		},
		methods: {
			async getWorkDetailHandle() {
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/getDetail",
					method: "POST",
					data: {
						id: this.checkObj.id,
						stepId: this.checkObj.stepId,
						startDate: this.checkObj.startDate
					}
				})
				if (res.status == 0) {
					//  处理时间数据
					const tempList = res.payload.currentPropValues && res.payload
						.currentPropValues.map(item => {
							return {
								name: item.split(":")[0],
								data: item.split(":")[1]
							}
						}) || []

					this.detailData = res.payload
					this.targetStepDefineFlag = res.payload.processDetail && res.payload.processDetail[0]
						.targetStepDefineFlag || undefined
					this.workOrderObjectVos = res.payload.workOrderObjectVos
					this.$set(this.detailData, 'currentPropValues', tempList)
					this.$set(this.checkObj, 'stepDefineFlag', res.payload.stepDefineFlag)
					this.$set(this.checkObj, 'accepter', res.payload.accepter)
					this.$set(this.checkObj, 'stepId', res.payload.stepId)
					this.$set(this.checkObj, 'executor', res.payload.executor)

					//  获取作业对象是否上报
					if (this.workOrderObjectVos.length) {
						this.workOrderObjectVos.forEach((item, index) => {
							request({
									url: `api/oct/wemini/bus/workOrder/getWorkOrderObjectDetail`,
									method: "post",
									data: {
										id: item.id
									}
								})
								.then(res => {
									this.$set(this.workOrderObjectVos[index], 'paramMap', res.payload)
								})
								.catch(err => {
									uni.showToast({
										title: "校验作业对象请求失败!",
										icon: 'none',
										duration: 2000,
									})
								})
						})
					}
				} else {
					uni.showToast({
						title: "获取工单详情失败!请重试",
						icon: 'none',
						duration: 2000,
					})
				}
			},
			processHandle(item) {
				const query = {
					executorId: uni.getStorageSync("userId") || "a0l8oni9jl9sc3l8olgv00004nl3potj",
					stepId: this.checkObj.stepId,
					stepDefineFlag: this.checkObj.stepDefineFlag,
					wfTemplateId: this.checkObj.wfTemplateId,
					projectId: this.checkObj.projectId,
					id: this.checkObj.id,
					documentId: this.checkObj.origin.eventLogId,
					workflowId: this.checkObj.workflowId,
					baseFlagName: this.checkObj.baseFlagName, //  待定
					nextStepFlag: this.targetStepDefineFlag,

					stepActionId: this.processData.id,
					stepActionDefineFlag: this.processData.defineFlag,
					procedure: {
						objectProcedureId: item.procedureVo.id,
						objectId: item.objectId,
						objectType: item.objectTYpe,
						procedureId: item.procedureVo.procedureId,
						checkStatus: 1,
						procedureSteps: [],
					},
				}

				uni.navigateTo({
					url: `../process-page-handle/process-page-handle?playTimeSpan=${this.detailData.playTimeSpan}&checkObj=${JSON.stringify(this.checkObj)}&item=${JSON.stringify(item)}&query=${JSON.stringify(query)}`
				})
			},
			async getButtonPermission() {
				const res = await request({
					url: "api/oct/wemini/bus/workOrder/workflowStepActionList",
					method: "POST",
					data: {
						wfTemplateId: this.checkObj.wfTemplateId,
						stepId: this.checkObj.stepId,
						workflowId: this.checkObj.workflowId,
					}
				})
				if (res.status == 0) {
					this.mainMenu = res.payload.find(item => item.actionDefineType) || {}
					this.menuList = res.payload.filter(item => {
						if (item.defineFlag == "procedure_handle_action") {
							this.processData = item
							return false
						} else if (!item.actionDefineType) return item
					}) || []
				} else {
					uni.showToast({
						title: "获取按钮权限失败!",
						icon: 'none',
						duration: 2000,
					})
				}
			},
			clickImageHandle(e) {
				const {
					srclist
				} = e.currentTarget.dataset
				uni.previewImage({
					urls: srclist,
				})
			},
			popupMenu() {
				uni.showActionSheet({
					itemList: this.menuList.map(item => item.name),
					itemColor: '#000000',
					success: (result) => {
						const item = this.menuList[result.tapIndex]
						this.menuHandle(item)
					}
				})
			},
			async menuHandle(item) {
				console.log('item', item);
				const nodeList = [
					'close_action', //  关闭
					'handle_action', //  处理
					'accept_unqualified_action',
					'suspend_action', //  挂起
				]

				const query = {
					executorId: uni.getStorageSync("userId") || "a0l8oni9jl9sc3l8olgv00004nl3potj",
					stepId: this.checkObj.stepId,
					stepDefineFlag: this.checkObj.stepDefineFlag,
					wfTemplateId: this.checkObj.wfTemplateId,
					projectId: this.checkObj.projectId,
					id: this.checkObj.id,
					documentId: this.checkObj.origin.eventLogId,
					workflowId: this.checkObj.workflowId,
					baseFlagName: this.checkObj.baseFlagName, //  待定
					nextStepFlag: this.targetStepDefineFlag,

					stepActionId: item.id,
					stepActionDefineFlag: item.defineFlag,
				}

				//  移除协助人与设置协助人单独处理
				if (item.defineFlag == "set_assistant_action") {
					//  设置协助人
					uni.navigateTo({
						url: `../select-staff/select-staff?query=${JSON.stringify(query)}&title=设置协助人&type=setAssist&workflowId=${this.checkObj.workflowId}&stepId=${this.checkObj.stepId}`
					})
					return
				} else if (item.defineFlag == "remove_assistant_action") {
					//  移除协助人
					uni.navigateTo({
						url: `../select-staff/select-staff?query=${JSON.stringify(query)}&title=移除协助人&type=removeAssist&workflowId=${this.checkObj.workflowId}&stepId=${this.checkObj.stepId}`
					})
					return
				} else if (item.defineFlag == "transfer_action") {
					//  转单
					uni.navigateTo({
						url: `../select-staff/select-staff?query=${JSON.stringify(query)}&title=选择转单人员&type=transfer&workflowId=${this.checkObj.workflowId}&stepId=${this.checkObj.stepId}`
					})
					return
				}

				if (item.funcDefine.find(item => item.defineFlag == "form_input_func") && nodeList.includes(item
						.defineFlag)) {
					if(item.defineFlag=="handle_action"){
						//  完成工单需要判断所有作业对象是否全部完成
						const findObj = this.workOrderObjectVos.find(item=>item.procedureVo.checkStatus == 0)
						if(findObj) return uni.showToast({
							title:"作业对象尚未全部完成",
							icon:"none",
							duration:2000
						})
					}
					
					uni.navigateTo({
						url: `../subsystem-work-detail-submit/subsystem-work-detail-submit?query=${JSON.stringify(query)}`,
					})
				} else {
					//  工单处理
					const res = await request({
						url: "api/oct/wemini/bus/workOrder/handleWorkOrder",
						method: "POST",
						data: query
					})
					if (res.status == 0) {
						uni.showToast({
							title: '处理工单成功!',
							icon: 'none',
							duration: 2000,
						})
						setTimeout(async () => {
							await this.getWorkDetailHandle()
							this.getButtonPermission()
						}, 1000)

					} else {
						uni.showToast({
							title: '处理工单失败!',
							icon: 'none',
							duration: 2000,
						})
					}
				}
			},
			checkTitleIndexHandle(index) {
				let name = undefined
				if (index == 1) name = '#work-data'
				else if (index == 2) name = '#source'
				else if (index == 3) name = '#job-title'
				else if (index == 4) name = '#flow'

				const query = uni.createSelectorQuery()
				query.select(name).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec(function(res) {
					//  由于res[0].top是相对与窗口滚动的相对单位,但我们需要的是绝对距离,所以需要获取窗口滚动的距离与其相加即可
					uni.pageScrollTo({
						selector: "subsystem-work-detail",
						scrollTop: res[0].top + res[1].scrollTop - 40
					})
				})

				this.checkTitleIndex = index
			},
			uploadHandle(item) {
				uni.navigateTo({
					url: `../Uploading-Page/Uploading-Page?item=${JSON.stringify(item)}&checkObj=${JSON.stringify(this.checkObj)}`
				})
			},
		}
	}
</script>

<style lang="less">
	.subsystem-work-detail-main {
		padding-top: 64rpx;
		padding-bottom: 100rpx;
		background-color: #f2f6ff;
		font-size: 28rpx;

		.title {
			height: 64rpx;
			width: 750rpx;
			z-index: 100;
			display: flex;
			align-items: center;
			background-color: #fff;
			color: #A2AFD0;
			position: fixed;
			top: 0;
			left: 0;

			view {
				text-align: center;
				line-height: 64rpx;
				flex: 1;
			}

			.active {
				color: #0A1B57;
			}
		}

		.subsystem-work-detail-body {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 20rpx;

			.work-detail-body {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 88rpx;
					border-bottom: 1rpx solid #EDEDED;

					.left {
						color: #2F2F2F;
					}

					.right {
						color: #666;
					}
				}

				.item-content {
					border-bottom: 1rpx solid #EDEDED;

					.label {
						line-height: 88rpx;
					}

					.label-body {
						color: #666;
					}
				}

			}

			.job-object {
				.job-obj-body {
					.item {
						height: 140rpx;
						font-size: 24rpx;
						position: relative;

						.text-1 {
							text:nth-child(1) {
								color: #6490FD;
							}

							text:nth-child(2) {
								color: #0A1B57;
								font-size: 28rpx;
								padding: 0 20rpx;
							}

							text:nth-child(3) {
								padding: 0 20rpx;
								border-radius: 20rpx;
								color: #fff;
							}
						}

						.text-2 {
							margin: 20rpx 0;
							color: #A2AFD0;
							font-weight: 500;
						}

						.text-3 {
							color: #A2AFD0;
						}

						.upload-obj {
							position: absolute;
							right: -20rpx;
							width: 128rpx;
							height: 56rpx;
							text-align: center;
							line-height: 56rpx;
							;
							top: -20rpx;
							color: #fff;
							background-color: @main_bg;
							border-top-right-radius: 10rpx;
						}
					}
				}
			}

			.flow-class {
				.flow-class-body {
					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid #EDEDED;

						.left {
							width: 80%;

							.content {
								view:nth-child(1) {
									margin-bottom: 15rpx;
								}

							}

							.time {
								margin-top: 10rpx;
								color: #666;
								margin-bottom: 20rpx;
							}

							.images {
								width: 150rpx;
								height: 150rpx;
							}
						}

						.right {
							padding: 0 20rpx;
							border-radius: 20rpx;
							color: #fff;
						}
					}

				}
			}
		}

		.base-box {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			width: 750rpx;

			.item {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

			}

			.left-item {
				color: #fff;
				background-color: #6892fa;
			}

			.right-item {
				color: #6892fa;
				background-color: #fff;
			}
		}
	}
</style>